<template>
  <div>
    <!-- 发票管理 -->
    <div class="tabNav">
      <router-link to="/index">
        <img :src="require('/src/assets/img/sidebar1.png')" />首页
      </router-link>
      <b class="colors"
        >/<img :src="require('/src/assets/img/caiwu.png')" />财务管理</b
      >
      <b><span class="fenge">/</span>发票管理</b>
    </div>
    <el-card class="cardTits" shadow="hover">
      <div class="subject-title">
        <div class="query query-invoice">
          <div class="flex-box">
            <div class="query-select">
              <el-select v-model="selectDate" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div class="query-date">
              <el-date-picker
                v-model="date"
                type="daterange"
                range-separator="～"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
              >
              </el-date-picker>
            </div>
            <div class="query-select">
              <el-select v-model="selectValue" placeholder="请选择">
                <el-option
                  v-for="item in status"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <el-button class="query-btn" @click="getTableList" type="primary">查询</el-button>
          </div>
          <div style="margin-right: 20px">
            <el-button
              class="query-btn"
              @click="getCreatOrUpdateInvoices()"
              type="primary"
              >申请发票</el-button
            >
          </div>
        </div>
      </div>
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        @selectionChange="downloadWhether"
        ref="multipleTable"
        @sort-change="sortChange"
        >
        <el-table-column prop="id" align="center" sortable="custom" label="ID" width="100"> </el-table-column>
        <el-table-column
            prop="billAmount"
            align="center"
            label="开票金额"
             sortable="custom"
        >
        <template #default="item">
            {{ formatNumber(item.row.billAmount) }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" sortable="custom" align="center" label="发票申请时间">
          <template #default="item">
            {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
            </template>
        </el-table-column>
        <el-table-column prop="mailingAddress" sortable="custom" align="center" label="邮寄地址">
        </el-table-column>
        <el-table-column prop="sevicerNum" align="center" label="结算单明细" class-name="editor">
          <template #default="item">
          <el-button type="text" @click="getQueryTaskByParam(item.row)">查看</el-button>
          </template>
        </el-table-column>
        <el-table-column prop="billStatus" align="center" label="状态">
            <template #default="item">
            {{ billStatus[item.row.billStatus] }}
            </template>
        </el-table-column>
        <el-table-column
            prop="caozuo"
            label="操作"
            width="140"
            class-name="editor"
        >
            <template #default="item">
              <el-button type="text" @click="seeCreatOrUpdateInvoice(item.row)">查看</el-button>
              <el-button v-if="item.row.billStatus != 3 && item.row.billStatus != 2" type="text" @click="modifyCreatOrUpdateInvoice(item.row)">修改</el-button>
            </template>
        </el-table-column>
        </el-table>
      <el-pagination
        v-if="tableData.length > 0"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="arrPage"
        :page-size="selectPage"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>

    <!-- 申请发票 -->
    <el-dialog
      :title="invoceTitle"
      custom-class="task-dialog"
      v-model="applyInvoice"
      width="60%"
    >
      <div class="add-border"></div>
      <div class="add-task">
        <el-form
          :model="taskForm"
          ref="taskForm"
          label-width="120px"
          class="demo-ruleForm"
        >
          <el-form-item label="抬头类型">
            <el-select v-model="taskForm.billType" disabled="true">
              <el-option value="1" label="专项增值税发票"></el-option>
              <!-- <el-option value="2" label="普通增值税发票"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="发票抬头">
            <el-input v-model="taskForm.billedBody" disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="税号">
            <el-input v-model="taskForm.invoiceTaxNumber" disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="结算单">
            <div class="jiesuandan cardTits">
              <el-table :data="listChecked" stripe style="width: 100%">
                <el-table-column prop="startTime" label="结算时间" width="">
                  <template #default="item">
                  {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.startTime)) }}
                  </template>
                </el-table-column>
                <el-table-column prop="settlementAmount" label="结算金额" width="">
                  <template #default="item">
                    {{ formatNumber(item.row.settlementAmount) }}
                  </template>
                </el-table-column>
                <el-table-column prop="phone" label="操作" width="" v-if="!detailsFlag">
                  <template #default="item">
                    <el-button @click="removeListChecked(item.$index)" type="text">移除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div @click="getQueryTaskByParams()" class="add-jiesuandan" v-if="apply && !detailsFlag">
                <i class="el-icon-plus"></i>
                <span>添加结算单</span>
              </div>
            </div>
          </el-form-item>
          <!-- <el-form-item label="开票方">
            <el-input v-model="taskForm.billedBody" :disabled="detailsFlag"></el-input>
          </el-form-item> -->
          <el-form-item label="总金额">
            <el-input v-model="taskForm.billAmount" disabled="true"></el-input>
          </el-form-item>
          <el-form-item label="接收方式">
            <el-select v-model="taskForm.receiveType" disabled="true">
              <el-option value="1" label="邮寄"></el-option>
              <!-- <el-option value="2" label="自提"></el-option> -->
            </el-select>
          </el-form-item>
          <el-form-item label="收件地址">
            <el-input v-if="modifys || apply" v-model="taskForm.mailingAddress" :disabled="false"></el-input>
            <el-input v-else v-model="taskForm.mailingAddress" :disabled="true"></el-input>
          </el-form-item>
          <template v-if="taskForm.billStatus == 3">
            <el-form-item label="快递公司">
              <span>{{ taskForm.logisticsName }}</span>
            </el-form-item>
            <el-form-item label="邮寄单号">
              <span>{{ taskForm.logisticsNo }}</span>
            </el-form-item>
            <el-form-item label="寄出日期">
              <span v-if="taskForm.sendTime == null">-</span>
              <span v-else>{{format('yyyy-MM-dd hh:mm:ss', new Date(taskForm.sendTime))}}</span>
            </el-form-item>
          </template>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="applyInvoice = false">取 消</el-button>
          <template v-if="taskForm.billStatus != 3">
            <el-button v-if="modifys" type="primary" @click="getCreatOrUpdateInvoice()">修改</el-button>
            <el-button v-else-if="apply" type="primary" @click="getCreatOrUpdateInvoicess()">申请</el-button>
            <el-button v-else type="primary" @click="applyInvoice = false">确 定</el-button>
          </template>
        </span>
      </template>
    </el-dialog>
    <!--结算单明细 -->
    <el-dialog
      title="结算单明细"
      custom-class="task-dialog"
      v-model="TaskModuleShow"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits">
        <el-table
          :data="businessList"
          @selectionChange="downloadWhether"
          ref="jiesuanClass"
          stripe
          style="width: 100%"
        >
          <el-table-column v-if="checkboxShow" type="selection" width="45"> </el-table-column>
          <el-table-column prop="id" label="结算单ID" width=""> </el-table-column>
          <el-table-column prop="amount"  label="服务款总额" width="">
            <template #default="item">
              {{ formatNumber(item.row.amount) }}
            </template>
          </el-table-column>
          <el-table-column prop="fee" label="平台服务费" width="">
            <template #default="item">
              {{ formatNumber(item.row.fee) }}
            </template>
          </el-table-column>
          <el-table-column prop="settlementAmount" label="结算总金额" width="">
            <template #default="item">
              {{ formatNumber(item.row.settlementAmount) }}
            </template>
          </el-table-column>
          <el-table-column prop="startTime" min-width="140" label="结算时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.startTime)) }}
            </template>
          </el-table-column>
          <el-table-column prop="createTime" min-width="140" label="结算单创建时间" width="">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.createTime)) }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template #default="item">
              <el-button style="font-size: 12px" type="text" @click="getTaskMingxi(item.row)">明细</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button v-if="checkboxShow" type="primary" @click="getQuerySettleListByStatus()">添 加</el-button>
          <el-button v-else type="primary" @click="TaskModuleShow = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!--关联任务明细 -->
    <el-dialog
      title="关联任务明细"
      custom-class="task-dialog"
      v-model="guanlianTaskModule"
      width="70%"
    >
      <div class="add-border"></div>
      <div class="cardTits" style="padding-bottom: 40px">
        <el-table
          :data="guanlianTaskList"
          stripe
          style="width: 100%"
        >
          <el-table-column prop="id" label="任务ID" width="90"> </el-table-column>
          <el-table-column prop="name" label="任务名称" min-width="120">
          </el-table-column>
          <el-table-column prop="taskPayment" label="预计服务费" width="110">
            <template #default="item">
              {{ formatNumber(item.row.taskPayment) }}
            </template>
          </el-table-column>
          <el-table-column prop="legalName" label="任务接收人" width="110">
          </el-table-column>
          <el-table-column prop="legalPhone" label="任务接收人手机号" width="150">
          </el-table-column>
          <el-table-column prop="bonus" label="奖励" width="100">
            <template #default="item">
              {{ formatNumber(item.row.bonus) }}
            </template>
          </el-table-column>
          <el-table-column prop="fine" label="处罚" width="100">
            <template #default="item">
              {{ formatNumber(item.row.fine) }}
            </template>
          </el-table-column>
          <el-table-column prop="shoudPayment" label="实际服务费" width="110">
            <template #default="item">
              {{ formatNumber(item.row.shoudPayment) }}
            </template>
          </el-table-column>
          <el-table-column prop="releaseDate" label="任务开始时间" width="150">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.releaseDate)) }}
            </template>
          </el-table-column>
          <el-table-column prop="endDate" label="任务结束时间" width="150">
            <template #default="item">
              {{ format('yyyy-MM-dd hh:mm:ss', new Date(item.row.endDate)) }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-dialog>
    <!-- 发票详情 -->
    <el-dialog
      title="申请发票"
      custom-class="task-dialog"
      v-model="detailsInvoice"
      width="60%"
    >
      <div class="add-border"></div>
      <div class="details-box">
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">抬头类型</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">企业单位</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">发票抬头</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">北京万科有限公司</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">税号</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">230192038018441</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">结算单</div>
          </el-col>
          <el-col :span="18">
            <div class="jiesuandan cardTits">
              <el-table :data="jiesuandanArr" stripe style="width: 100%">
                <el-table-column prop="name" label="结算时间" width="">
                </el-table-column>
                <el-table-column prop="idcrad" label="结算金额" width="">
                </el-table-column>
                <el-table-column prop="phone" label="操作" width="">
                  <el-button type="text">移除</el-button>
                </el-table-column>
              </el-table>
            </div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">开票方</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">灵活用工平台</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">总金额</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">4990.00</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">接收方式</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">邮寄</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">收件地址</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">北京东城贡院六号</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">申请时间</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">2021-02-12 12:20:20</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">被驳回时间</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">2021-02-12 12:20:20</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">被驳回原因</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">内容不符合</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">物流名称</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">顺丰快递</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">邮寄单号</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">213801841047414148</div>
          </el-col>
        </el-row>
        <el-row :gutter="20" class="details-item">
          <el-col :span="6">
            <div class="label-text">寄出日期</div>
          </el-col>
          <el-col :span="18">
            <div class="content-text">2021-02-15</div>
          </el-col>
        </el-row>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="detailsInvoice = false">取 消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Invoice",
  data() {
    return {
      orderByZH: false,
      orderByAsc: false,
      orderByColume: 'createTime',
      invoceTitle: '申请发票',
      guanlianTaskModule: false, // 关联任务明细
      creatOrUpdateInvoiceId: 0,
      creatOrUpdateInvoiceBillNo: 0,
      creatOrUpdateInvoiceBillStatus: 0,
      guanlianTaskList: [],
      apply: false,
      applys: false,
      detailsFlag: false,
      searchVal: "", // 查询条件
      total: 1, // 总条数
      arrPage: [10, 20], // 每页条数
      selectPage: 10, // 每页选中条数
      currentPage: 1,
      tableData: [],
      checkboxSelect: 0, // 选中条数
      dwonloadList: [], // 选中的数据
      jiesuandanArr: [],
      creatOrUpdateInvoice: [],
      selectValue: "",
      selectDate: "",
      date: [],
      options: [
        {
          value: "3",
          label: "最近三个月",
        },
        {
          value: "6",
          label: "最近半年",
        },
        {
          value: "12",
          label: "最近一年",
        },
      ],
      status: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "待审批",
        },
        {
          value: "2",
          label: "待寄出",
        },
        {
          value: "3",
          label: "已完成",
        },
        {
          value: "1",
          label: "已驳回",
        },
      ],
      applyInvoice: false,
      modifys: false,
      businessList: [],
      detailsInvoice: false,
      checkboxShow: false,
      billStatus: {
        0: '待审批',
        1: '已驳回',
        2: '待寄出',
        3: '已完成',
      },
      TaskModuleShow: false,
      taskForm: {
        billType: "1", //发票抬头类型
        billedBodyNo: this.$store.state.userInfo.businessName, // 发票抬头
        billedBody: this.$store.state.userInfo.businessNo, // 开票方
        invoiceTaxNumber: this.$store.state.userInfo.socialCreditCode, // 税号
        billAmount: 0, // 发票金额
        receiveType: "1", // 接收方式
        mailingAddress: "" // 邮寄地址
      },
      rules: {
        billedBodyNo: [{ required: true, message: "请输入发票抬头", trigger: "blur" }],
        billedBody: [{ required: true, message: "请输入开票方", trigger: "blur" }],
        invoiceTaxNumber: [{ required: true, message: "请输入税号", trigger: "blur" }],
        billAmount: [{ required: true, message: "请选择总金额", trigger: "change" }],
        mailingAddress: [{ required: true, message: "请输入收件地址", trigger: "blur" }],
      },
      listChecked: []
    };
  },
  watch: {
    selectDate(val) {
      this.date = [new Date(this.getLastMonth(val)), new Date()]
    },
    listChecked(d) {
      console.log(d)
    },
  },
  components: {},
  activated() {
    this.getTableList();
  },
  methods: {
    handleCurrentChange(d) {
      // 分页切换回调
      this.currentPage = d;
      this.getTableList();
    },
    handleSizeChange(d) {
      // 分页切换每页条数回调
      this.selectPage = d;
      this.getTableList();
    },
    getTableList() {
      // 获取发票列表信息
      let start = "",
          end = ""
      if(this.date != "" && this.date != null) {
        start = this.date[0]
        end = this.date[1]
      }
      this.$http({
        url: "/api/quick/finance/manage/queryInvoiceListByParam",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          orderByAsc: this.orderByAsc, // 是否正序
          orderByColume: this.orderByColume, // 排序字段
          orderByZH: this.orderByZH, // 是否汉字
          billStatus: this.selectValue, // 发票状态
          startTime: start,
          endTime: end,
          pageNum: this.currentPage,
          pageSize: this.selectPage,
          clientType: 1,
          businessId: this.$store.state.userInfo.businessId
        },
      }).then((data) => {
        if (data.code === 0) {
          this.tableData = data.result.list;
          this.total = data.result.total;
        }
      });
    },
    getCreatOrUpdateInvoices(){
      this.invoceTitle = '申请发票'
      this.taskForm = {
        billType: "1", //发票抬头类型
        billedBodyNo: this.$store.state.userInfo.businessNo, // 发票抬头
        billedBody: this.$store.state.userInfo.businessName, // 开票方
        invoiceTaxNumber: this.$store.state.userInfo.socialCreditCode, // 税号
        billAmount: 0, // 发票金额
        receiveType: "1", // 接收方式
        mailingAddress: "" // 邮寄地址
      }
      this.listChecked = []
      this.apply = true
      this.modifys = false
      // this.taskForm= [],
      this.applyInvoice = true
      this.detailsFlag = false; 
    },
    getQueryTaskByParams(){
      // 添加结算单
      this.checkboxShow = true;
      this.TaskModuleShow = true;
      this.$http({
          url: "/api/quick/finance/manage/querySettleListByStatus",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            businessId: JSON.parse(localStorage.getItem("bussines_info")).businessId,
            isApplyInvoice: 0,
            paymentStatuts: 2
          }
        }).then((data) => {
          if (data.code === 0) {
            this.businessList = data.result.list;
            this.total = data.result.total;
            setTimeout(() => {
              for(let i = 0; i < this.businessList.length; i++) {
                for(var k = 0; k < this.listChecked.length; k++) {
                  if(this.businessList[i].settlementNo == this.listChecked[k].id) {
                    this.$refs.jiesuanClass.toggleRowSelection(this.businessList[i], true)
                  }
                }
              }
            }, 10)
          }
      });
    },
    getQuerySettleListByStatus(){
      let money = 0
      for (let i = 0; i < this.dwonloadList.length; i++) {
        this.listChecked.push({
          id: this.dwonloadList[i].settlementNo,
          settlementAmount: this.dwonloadList[i].settlementAmount,
          startTime: this.dwonloadList[i].endTime
        })
        money += parseInt(this.dwonloadList[i].settlementAmount)
      }
      let obj = {}
      this.listChecked = this.listChecked.reduce((cur,next) => {
        obj[next.id] ? "" : obj[next.id] = true && cur.push(next);
        return cur;
      },[])
      this.taskForm.billAmount = money
      this.TaskModuleShow = false;
    },
    getQueryTaskByParam(item) {
      // 查看结算单明细
      this.TaskModuleShow = true;
      this.$http({
          url: "/api/quick/finance/manage/querySettleListByInvoiceNo",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            businessId: item.businessId,
            invoiceNo: item.billNo,
            orderByAsc: false, // 是否正序
            orderByColume: "createTime", // 排序字段
            orderByZH: false, // 是否汉字
            pageSize: 100,
            pageNum: 1
          }
        }).then((data) => {
          if (data.code === 0) {
            this.businessList = data.result.list;
            this.total = data.result.total;
        }
      });
    },
    getTaskMingxi(item) {
      // 获取关联任务明细
      this.guanlianTaskModule = true;
      this.$http({
        url: "/api/quick/finance/manage/selectTaskListByNo",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          settlementNo: item.settlementNo,
          orderByAsc: false, // 是否正序
          orderByColume: "createTime", // 排序字段
          orderByZH: false, // 是否汉字
          pageNum: 1,
          pageSize: 1000
        }
      }).then((data) => {
        if (data.code === 0) {
          this.guanlianTaskList = data.result.list;
        }
      });
    },
    seeCreatOrUpdateInvoice(item) {
      // 查看发票详情
      this.modifys = false; 
      this.detailsFlag = true; 
      this.applyInvoice = true
      this.apply = false
      this.invoceTitle = '发票详情'
      this.$http({
        url: "/api/quick/finance/manage/queryInvoiceByParam",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          billNo: item.billNo
        }
      }).then((data) => {
        if (data.code === 0 && data.result !== null) {
          this.taskForm = data.result
          this.taskForm.receiveType = data.result.receiveType + ''
          this.taskForm.billType = "1"
          this.getInvoiceSelet(item)
        }
      });
    },
    modifyCreatOrUpdateInvoice(item) {
      this.modifys = true,
      this.detailsFlag = true; 
      this.applyInvoice = true
      this.invoceTitle = '发票修改'
      this.creatOrUpdateInvoiceId = item.id
      this.creatOrUpdateInvoiceBillNo = item.billNo
      this.creatOrUpdateInvoiceBillStatus = item.billStatus
      this.taskForm.mailingAddress = item.mailingAddress
      this.$http({
        url: "/api/quick/finance/manage/queryInvoiceByParam",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          billNo: item.billNo
        }
      }).then((data) => {
        if (data.code === 0 && data.result !== null) {
          this.taskForms = data.result
          this.getInvoiceSelet(item)
        }
      });
    },
    getInvoiceSelet(item) {
      // 发票详情查看结算单
      this.$http({
          url: "/api/quick/finance/manage/querySettleListByInvoiceNo",
          method: "post",
          headers: {
            "Content-Type": "application/json",
          },
          data: {
            businessId: item.businessId,
            invoiceNo: item.billNo,
            orderByAsc: false, // 是否正序
            orderByColume: "createTime", // 排序字段
            orderByZH: false, // 是否汉字
            pageSize: 100,
            pageNum: 1
          }
        }).then((data) => {
          if (data.code === 0) {
            let list = data.result.list
            this.listChecked = []
            for (let i = 0; i < list.length; i++) {
              this.listChecked.push({
                id: list[i].settlementNo,
                settlementAmount: list[i].settlementAmount,
                startTime: list[i].endTime
              })
            }
        }
      });
    },
    getCreatOrUpdateInvoicess(){
      if(this.listChecked.length == 0) {
        this.$message({
            message: '请添加结算账单',
            type: 'error',
            offset: 60
          })
        return false
      }
      let arr = []
      for(let i = 0; i < this.listChecked.length; i++) {
        arr.push(this.listChecked[i].id)
      }
      this.$http({
        url: "/api/quick/finance/manage/creatOrUpdateInvoice",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          billType: this.taskForm.billType,
          billedBodyNo: this.taskForm.billedBodyNo,
          billedBody: this.taskForm.billedBody,
          invoiceTaxNumber: this.taskForm.invoiceTaxNumber,
          billAmount: this.taskForm.billAmount,
          receiveType: this.taskForm.receiveType,
          mailingAddress: this.taskForm.mailingAddress,
          settlementNos: arr
        }
      }).then((data) => {
        if (data.code === 0) {
          this.applyInvoice = false
          this.getTableList()
        }
      });
    },
    getCreatOrUpdateInvoice() {
      this.applyInvoice = true
      this.detailsFlag = true; 
      this.taskForm.id = this.creatOrUpdateInvoiceId;
      this.taskForm.billNo = this.creatOrUpdateInvoiceBillNo;
      this.taskForm.billStatus = this.creatOrUpdateInvoiceBillStatus;
      // 修改发票列表信息
      this.$http({
        url: "/api/quick/finance/manage/creatOrUpdateInvoice",
        method: "post",
        headers: {
          "Content-Type": "application/json",
        },
        data: this.taskForm
      }).then((data) => {
        if (data.code === 0) {
          this.applyInvoice = false
          this.getTableList()
          this.$message({
            message: '修改成功',
            type: 'success',
            offset: 60
          })
        }
      });
    },
    getLastMonth(num) {
      var date = new Date();
      date.setMonth(date.getMonth() - num);
      date.toLocaleDateString();
      var y = date.getFullYear();
      var m = date.getMonth() + 1;
      m = m < 10 ? "0" + m : m;
      var d = date.getDate();
      d = d < 10 ? "0" + d : d;
      const time = y + "-" + m + "-" + d;
      return time;
    },
    downloadWhether(d) {
      this.checkboxSelect = d.length;
      this.dwonloadList = d;
    },
    removeListChecked(index) {
      // 删除结算单
      this.listChecked.splice(index, 1)
      let money = 0
      for (let i = 0; i < this.listChecked.length; i++) {
        money += parseInt(this.listChecked[i].settlementAmount)
      }
      this.taskForm.billAmount = money
    },
    sortChange(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "mailingAddress") {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTableList()
    },
    sortChange1(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getQueryTaskByParam()
    },
    sortChange2(d) {
      // 监听排序
      if(d.prop == null) {
        // 默认排序方式
        this.orderByZH = false
        this.orderByAsc = false
        this.orderByColume = 'createTime'
      }else {
        let orderByZH = false
        if(d.prop == "legalName" || d.prop == 'name') {
          orderByZH = true
        }
        this.currentPage = 1
        this.selectPage = 10
        let orderByAsc = d.order == "descending" ? false : true
        this.orderByZH = orderByZH
        this.orderByAsc = orderByAsc
        this.orderByColume = d.prop
      }
      this.getTaskMingxi()
    },
  },
};
</script>
<style lang="scss" scoped>
.query-invoice {
  justify-content: space-between;
  .flex-box {
    display: flex;
  }
  .task-add {
    margin-right: 20px;
    & :deep(span),
    & :deep(i) {
      color: #ffffff;
    }
  }
  .query-date {
    height: 32px;
    margin-right: 10px;
    & :deep(.el-input__inner) {
      height: 32px;
      border-color: #eff4fa;
      .el-range-input {
        font-size: 12px;
      }
      .el-range__icon,
      .el-range-separator {
        line-height: 24px;
      }
    }
  }
}
.add-task {
  padding-right: 50px;
  margin-top: 26px;
  .jiesuandan {
    border: 1px solid #eef4fb;
    border-radius: 4px;
    .add-jiesuandan {
      margin: 20px;
      border-radius: 3px;
      border: 1px dashed #6c8198;
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      * {
        color: #6c8198;
      }
      span {
        margin-left: 10px;
      }
    }
  }
}
.task-dialog {
  .el-dialog__body {
    padding-top: 10px;
    padding-bottom: 0px;
    .add-border {
      height: 1px;
      margin-bottom: 30px;
      background-color: #eef4fb;
    }
  }
  .title {
    color: #0a2e6a;
    line-height: 14px;
    padding-left: 12px;
    font-size: 14px;
    border-left: 3px solid #326cf0;
    margin-bottom: 15px;
    margin-left: 15px;
  }
  .details-box {
    .details-item {
      margin-bottom: 20px;
    }
    .label-text {
      color: #6c8198;
      font-size: 12px;
      text-align: right;
    }
    .content-text {
      color: #0a2e6a;
      font-size: 12px;
      margin-left: 20px;
    }
  }
}
</style>
